<template>
	<div class="outer">
    <headers @back-click="back()" :headers="headers"></headers>
    <scroll :topArea="44" ref="repairDetail" :pullDownRefresh="false" :pullUpLoad="false" :data="showData">
      <div class="repair-wrapper" v-if="hasInsure">
        <div class="detail-area">
          <div class="detail-content" style="border:none">
            <div class="img-area">
                <img :src="lst.image" alt="图片">
            </div>
            <div class="content-area">
                <div class="title">{{lst.goodsName}}</div>
                <div class="price">价值： ￥{{(lst.price/100).toFixed(2)}}</div>
                <div class="sku">
                  <div class="sku-item" v-for="c in lst.standard" :key="c.id">{{c.name}}</div>
                </div>
            </div>
          </div>
        </div>
        <div class="input-area">
          <div class="inputs">
            <textarea  class="text-region" v-model="textArea.explanation"  placeholder="问题描述"></textarea>
          </div>
          <div class="pic-area">
            <div class="imgWrapper" v-for="(i,index) in upImgs" :key="i.id" v-if="upImgs.length>0">
              <img :src="i.url" alt="">
              <div class="cancel" @click="delPic(index)">
                <i class="icon ion-ios-close-empty"></i>
              </div>
            </div>
            <div class="up-region" v-show="upImgs.length<5">
              <input type="file" accept="image/gif,image/jpeg,image/jpg,image/png" @change="upLoadCompensate($event)">
              <img class="img" src="../../assets/img/lease/blank_img.png" alt="" >
              <p v-if="upImgs.length > 0">
                {{upImgs.length+1}}/5
              </p>
              <p v-if="upImgs.length == 0">
                添加图片
              </p>
            </div>
          </div>
        </div>
        <div class="info-message">
         <div>
           注： 请提供为您所选择的理由添加有效力的凭证
         </div>
         <div>订单提交成功后，会有商家、客服与您联系，请保持电话通畅。</div>
        </div>
      </div>
      <div class="no-permission" v-else>
        <div class="title">报修</div>
        <div class="merchant-info">
          <div class="info-item">
            <div>商家名称:</div>
            <div>{{merchant.merchantName}}</div>
          </div>
          <div class="info-item">
            <div>商家电话:</div>
            <div class="phone">{{merchant.contactPhone}}</div>
          </div>
          <div class="info-item">
            <div>商家地址:</div>
            <div>{{merchant.contactAddress}}</div>
          </div>
        </div>
        <div class="info">
          因你未购买过保险服务，请致电商家咨询详细维修细节
        </div>
      </div>
      <div class="button-area" @click="sendRepairReq()" v-if="hasInsure">
        <div class="button button-confirm">提交</div>
      </div>
    </scroll>
  </div>
</template>

<script>
import {checkInsurance,sendRepair} from "@/api/homepage.js"
import apiService from "@/api/homepage.js"
import OSS from 'ali-oss'
export default {
  name: 'repairList',
  data: function(){
    return {
      headers: {
        title: "维修申请"
      },
      lst: [],
      hasInsure: true,
      merchant: {},
      showData: [],
      upImgs: [],
      upImgsUp: [],
      textArea: {
        explanation: ""
      },
      clientInfo: {}
    }
  },
  components: {
  },
  methods: {
    back: function(){
      this.$router.go(-1);
    },
    checkInsu: function(){
      checkInsurance(this.lst.orderId).then(data => {
        if(data.code == 200){
          this.hasInsure = data.data.havaInsurance;
          if(!this.hasInsure){
            this.merchant = data.data.merchant;
          }
          this.showData = [this.merchant]; 
        }else {
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
          this.$refs.repairDetail.forceUpdata();
        }  
      })
    },
    delPic: function(index){
      this.upImgs.splice(index,1);
      this.upImgsUp.splice(index,1);
    },
    getPicParameters: function() {
      let _this = this;
      apiService.getPicParameter('serviceOrder').then(resp=>{
        _this.clientInfo = {
          "accessKeyId": resp.accessKeyId,
          "accessKeySecret": resp.accessKeySecret,
          "stsToken": resp.securityToken,
          "region": 'oss-cn-hangzhou',
          "bucket": resp.bucket,
          "secure": true
        }
      })
    },
    upLoadCompensate(event){
      let _this = this;
      var inputfile = event.target.files[0];
      var ext = inputfile.name.substring(inputfile.name.lastIndexOf("."));
      var uniqueId = function() {
        return Math.random().toString(36).substring(2) + Math.random().toString(36).substring(2) + (new Date()).getTime().toString(36);
      }
      var d = new Date();
      var ymd = d.getFullYear()+""+d.getMonth()+d.getDate();
      var fileName = "compensate" + '/' + ymd + '/' + uniqueId() + ext.toLowerCase();
      var client = new OSS.Wrapper(_this.clientInfo);
      client.multipartUpload(fileName, event.target.files[0]).then(function (result) {
              var imageUrl = result.res.requestUrls[0];
              _this.upImgs.push({"url":_this.imgUrlService + fileName});
              _this.upImgsUp.push({"url": fileName});
      });
    },
    sendRepairReq: function(){
      let param = {};
      param.orderId = this.lst.orderId;
      if(this.textArea.explanation){
        param.explanation = this.textArea.explanation;
      }
      if(this.upImgsUp.length >0 ){
        param.imgJson = JSON.stringify(this.upImgsUp);
      }
      sendRepair(this.lst.orderId,param).then( data => {
        if(data.code != 200){
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
        }else {
          // $state.go('successRepair');
          localStorage.removeItem("repairGoods");
        }
      })
    }
  },
  mounted: function(){
    if(localStorage.repairGoods){
      this.lst = JSON.parse(localStorage.repairGoods);
      this.showData = [this.lst];
    };
    this.checkInsu();
    this.getPicParameters();
  },
}
</script>
<style lang="scss" scoped>
.outer {
  height: 100%;
  width: 100%;
  position: absolute;
}
  .input-area {
    margin-top: 12px;
    padding: 12px 16px;
    background: #fff;
    padding-bottom: 0;
    & .inputs {
      min-height: 120px;
      position: relative;
    }
    & .text-region {
      width: 100%;
      resize: none;
      min-height: 120px;
      line-height: 16px;
      padding: 9px 16px;
      border-radius: 5px;
      background: #f7f7f7;
      font-size: 12px;
      color: #999;
      padding-bottom: 15px;
      box-sizing: border-box;
    }
    & .title {
      position: absolute;
      bottom: 0;
      right: 9px;
      font-size: 12px;
      color: #999;
    }
    & .pic-area {
      width: 100%;
      padding-top: 21px;
      padding-bottom: 13px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      & .up-region {
        width: 70px;
        height: 70px;
        position: relative;
        border: 1px dotted #b8b8b8;
        &>input {
          display: block;
          width: 100%;
          height: 100%;
          position: absolute;
          top:0;
          left: 0;
          opacity: 0;
        }
        &>img {
          display: block;
          width: 35px;
          height: 25px;
          margin: 0 auto;
          margin-top: 16px;
        }
        &>p {
          width: 100%;
          display: block;
          margin-top: 9px;
          font-size: 9px;
          color: #b8b8b8;
          text-align: center;
          line-height: 12px;
        }
      }
      & .imgWrapper {
        width: 70px;
        height: 70px;
        position: relative;
        margin-right: 12px;
        margin-bottom: 8px;
        &>img {
          width: 100%;
          height: 100%;
        }
        & .cancel {
          position: absolute;
          top: -7px;
          right: -5px;
          width: 21px;
          height: 21px;
          background-color: rgba(0,0,0,0.7);
          border-radius: 50%;
          background: url('../../assets/img/lease/cancel.png') 0 0 no-repeat;
          background-size: 100%;
        }
      }
    }
  }
  .info-message {
    padding: 16px;
    font-size: 12px;
    line-height: 21px;
    color: #999;
  }
  .button-area {
    padding: 0 16px;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0 ;
    left: 0;
    right: 0;
    &>div {
      width: 100%;
    }
  }
</style>